<template>
    <box x="0" y="0" note="英雄头像">
        <img src="res/ui/heroBg.png" @click="openHero()">
            <img src="res/ui/avatarHero.png" width="45" height="45" x="36" y="36"></img>
            <img src="res/ui/blood.png" x="110" y="29" width="80"></img>
            <img src="res/ui/mana.png" x="95" y="44" width="60"></img>
            <img src="res/ui/exp.png" x="95" y="60" width="50"></img>
            <img src="res/ui/heroBg_O.png" x="78" y="17"></img>
        </img>
    </box>
    <box x="-500" y="5" note="顶部按钮">
        <img :src="topBtnRes" x="325" @click="topBtnClick()"></img>
        <box :visible="topBtnVisible" note="展开与收缩">
            <tpl src="tpl/components/button.tpl" x="65" icon="res/ui/btnActivity.png" @click="openTeam(123)"></tpl>
            <tpl src="tpl/components/button.tpl" x="130" icon="res/ui/btnShop.png" @click="openTeam(123)"></tpl>
            <tpl src="tpl/components/button.tpl" x="195" icon="res/ui/btnRank.png" @click="openTeam(123)"></tpl>
            <tpl src="tpl/components/button.tpl" x="260" icon="res/ui/btnAchieve.png" @click="openTeam(123)"></tpl>
        </box>
    </box>
    <box x="-120" y="0" note="小地图">
        <img src="res/ui/ground5.png" width="120" height="120" grid="25,25,25,25" @click="openMiniMap()"></img>
        <img src="res/ui/map.jpg" width="110" height="110" x="5" y="5" radius="22.5"></img>
        <box x="55" y="55" filter="#FF0000" note="上色">
            <img src="res/ui/colorBg.png" width="5" height="5"></img>
        </box>
        <img src="res/ui/colorMask.png" width="115" height="25" x="3" y="90"></img>
        <txt :text="mapName" x="20" y="93" size="16" color="#ffffff"></txt>
    </box>
    <box x="-131" y="-300" note="底部按钮">
        <img :src="downBtnRes" x="65" y="195" @click="downBtnClick()"></img>
        <box :visible="downBtnVisible" note="展开与收缩">
            <tpl src="tpl/components/button.tpl" icon="res/ui/btnBag.png" @click="openBag()" note="背包"></tpl>
            <tpl src="tpl/components/button.tpl" x="65" icon="res/ui/btnHero.png" @click="openRole()" note="人物"></tpl>

            <tpl src="tpl/components/button.tpl" y="65" icon="res/ui/btnSkill.png" @click="openTeam(1)"></tpl>
            <tpl src="tpl/components/button.tpl" x="65" y="65" icon="res/ui/btnUnion.png" @click="openTeam(2)"></tpl>

            <tpl src="tpl/components/button.tpl" y="130" icon="res/ui/btnFriend.png" @click="openTeam(3)"></tpl>
            <tpl src="tpl/components/button.tpl" x="65" y="130" icon="res/ui/btnSocial.png" @click="openTeam(4)"></tpl>

            <tpl src="tpl/components/button.tpl" y="195" icon="res/ui/btnSet.png" @click="openTeam(5)"></tpl>
        </box>
    </box>
    <box y="-147" note="底部信息框">
        <img src="res/ui/endBg.png" y="118"></img>
        <img src="res/ui/roleInfoBg.png" x="50"></img>
        <img src="res/ui/roleInfoBlood.png" x="160" y="25" :trimY="playerBlood"></img>
        <img src="res/ui/roleInfoMana.png" x="196" y="25" :trimY="playerMana"></img>
        <img src="res/ui/chatBg.png" x="297" y="19"></img>
        <txt text="Lv" x="90" y="122" size="16" color="#FFD700"></txt>
        <txt :text="playerLevel" x="120" y="122" size="16" color="#ffffff"></txt>
        <txt text="Exp" x="200" y="122" size="16" color="#FFD700"></txt>
        <img src="res/ui/exp.png" x="240" y="128"></img>
        <txt text="攻击" x="620" y="122" size="16" color="#FFD700"></txt>
        <txt :text="playerLevel" x="660" y="122" size="16" color="#ffffff"></txt>
    </box>
    <box x="680" y="120" note="测试组件">
        <img src="res/ui/ground5.png" width="100" height="140" grid="25,25,25,25"></img>
        <txt text="测试" x="20" y="20" size="24" color="#ff0000"></txt>
        <tpl src="tpl/components/button.tpl" icon="res/ui/buttonLN.png" x="10" y="50" title="治疗" audio="res/audio/click.mp3" @click="cure()"></tpl>
        <tpl src="tpl/components/button.tpl" icon="res/ui/buttonL.png" width="80" height="40" x="10" y="90" title="回合战斗" @click="openTpl('tpl/fight.tpl',null)"></tpl>
    </box>
    <tpl name="hero" src="tpl/hero.tpl" x="100" y="150" :index="heroIndex" :visible="heroVisible" @click="setIndex("hero")"></tpl>
    <tpl name="role" src="tpl/role.tpl" x="450" y="150" :index="roleIndex" :visible="roleVisible" @click="setIndex("role")"></tpl>
    <tpl name="bag" src="tpl/bag.tpl" x="200" y="150" :index="bagIndex" :visible="bagVisible" @click="setIndex("bag")"></tpl>
    <tpl name="miniMap" src="tpl/miniMap.tpl" x="200" y="150" :index="miniMapIndex" :visible="miniMapVisible" @click="setIndex("miniMap")"></tpl>
    <tpl name="tip" src="tpl/tip.tpl" x="801" y="0" index="999" content=""></tpl>
</template>

<script>
data(){
    return {
        playerName: "角色名",
        playerLevel: 100,
        playerBlood: 50,
        playerMana: 60,
        mapName: "地图名 (100,100)",
        topBtnVisible: true,
        topBtnRes: "res/ui/btnRight.png",
        downBtnVisible: true,
        downBtnRes: "res/ui/menuX.png",
        bagVisible: false,
        roleVisible: false,
        heroVisible: false,
        miniMapVisible: false,
        heroIndex: 100,//显示层次 数字越大优先级越高  避免 tip 被遮挡需给他设置更高的
        roleIndex: 101,
        bagIndex: 102,
        miniMapIndex: 103
    }
}

create() {
    this.playerName = world.playerInfo.name;
    this.playerLevel = world.playerInfo.level;
    this.mapName = world.playerInfo.mapId + " (" +world.playerInfo.x + "," + world.playerInfo.y + ")",
    console.log("ui create");
}

update(delta) {

}

destroyed() {
    
}

cure(){
    if(this.playerBlood > 10 && this.playerMana > 10){
        this.playerBlood -= 10;
        this.playerMana -= 10;
        console.log(this.playerBlood, this.playerMana);
    }
}

setIndex(tpl){//调整UI层级
    console.log('setIndex');
    if(this.heroIndex > 100){
        this.heroIndex--;
    }
    if(this.roleIndex > 100){
        this.roleIndex--;
    }
    if(this.bagIndex > 100){
        this.bagIndex--;
    }
    if(this.miniMapIndex > 100){
        this.miniMapIndex--;
    }
    if(tpl == "hero"){
        this.heroIndex = 200;
    }else if(tpl == "role"){
        this.roleIndex = 200;
    }else if(tpl == "bag"){
        this.bagIndex = 200;
    }else if(tpl == "miniMap"){
        this.miniMapIndex = 200;
    }
}

openMiniMap(){
    console.log('openMiniMap');
    this.miniMapVisible = !this.miniMapVisible;
    this.setIndex("miniMap");//新开窗口index更高
}

openHero(){
    console.log('openHero');
    this.heroVisible = !this.heroVisible;
    this.setIndex("hero");//新开窗口index更高
}

openRole(){
    console.log('openRole');
    this.roleVisible = !this.roleVisible;
    this.setIndex("role");//新开窗口index更高
}

openBag(){
    console.log('openBag');
    //bag.visible = !bag.visible;
    this.bagVisible = !this.bagVisible;
    this.setIndex("bag");//新开窗口index更高
}

openTeam(event){
    console.log('openTeam', event);
}

topBtnClick(){
    if(this.topBtnVisible){
        this.topBtnRes = "res/ui/btnLeft.png";
        this.topBtnVisible = false;
    }else{
        this.topBtnRes = "res/ui/btnRight.png";
        this.topBtnVisible = true;
    }
}
downBtnClick(){
    if(this.downBtnVisible){
        this.downBtnRes = "res/ui/menuO.png";
        this.downBtnVisible = false;
    }else{
        this.downBtnRes = "res/ui/menuX.png";
        this.downBtnVisible = true;
    } 
}
</script>